<script setup lang="ts">
import { getCollectionList } from '@/api/common';
import ProductCard from '@/components/ProductCard.vue';
const collectionList = ref([]);
const query = reactive({
  pageNum: 1,
  pageSize: 4,
})
onMounted(() => {
  handleCurrentChange()
})
const total = ref(0);
const handleCurrentChange = (val: number) => {
  query.pageNum = val;
  getCollectionList(query).then(res => {
    if (res.code == 200) {
      collectionList.value = res.rows;
      total.value = res.total;
    }
  }).catch(err => {
    console.log(err)
  })
}
import { useRouter } from 'vue-router';
const router = useRouter();
function toDetail(id: number) {
  router.push({ path: `/financial-products/${id}` });
}
</script>

<template>
  <div>
    <ProductCard v-for="item in collectionList" @click="toDetail(item.id)" :key="item.id" :product="item"></ProductCard>
    <el-pagination :current-page="query.pageNum" :page-size="query.pageSize" :total="total" layout="prev, pager, next"
      @current-change="handleCurrentChange" />
  </div>
</template>
